<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 积分商城</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../js/core.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4361ee',
                        secondary: '#3a86ff',
                        success: '#2ecc71',
                        warning: '#f39c12',
                        danger: '#e74c3c',
                        dark: '#212529',
                        light: '#f8f9fa'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .order-card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .nav-link {
                @apply px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors duration-200;
            }
            .nav-link-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
    <!-- 导航栏 -->
    <header id="navbar" class="bg-white shadow-sm sticky top-0 z-40 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <!-- Logo -->
                <a href="../../index.html" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold">积分商城</span>
                </a>
                
                <!-- 导航菜单 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-6">
                    <a href="../../index.html" class="nav-link">首页</a>
                    <a href="shop.html" class="nav-link">商城</a>
                    <a href="points.html" class="nav-link">积分中心</a>
                    <a href="orders.html" class="nav-link nav-link-active">我的订单</a>
                </nav>
                
                <!-- 用户工具 -->
                <div class="flex items-center space-x-4">
                    <!-- 购物车按钮 -->
                    <div class="relative">
                        <button id="cart-btn" class="p-2 text-gray-600 hover:text-primary transition-colors">
                            <i class="fa fa-shopping-cart text-xl"></i>
                        </button>
                        <span id="cart-count" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">0</span>
                    </div>
                    
                    <!-- 用户按钮 -->
                    <div class="relative">
                        <button id="user-menu-btn" class="flex items-center space-x-2 p-1 hover:bg-gray-100 rounded-full transition-colors">
                            <div id="avatar-placeholder" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                                <i class="fa fa-user text-gray-500"></i>
                            </div>
                            <span id="user-name" class="hidden md:inline-block">登录/注册</span>
                            <i class="fa fa-angle-down text-gray-500 hidden md:inline-block"></i>
                        </button>
                        
                        <!-- 用户下拉菜单 -->
                        <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <div id="login-register" class="p-2 border-b">
                                <a href="../user/login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 rounded">登录</a>
                                <a href="../user/register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 rounded">注册</a>
                            </div>
                            <div id="user-info" class="p-2 border-b hidden">
                                <div class="px-4 py-2 text-sm">
                                    <div id="dropdown-username" class="font-medium"></div>
                                    <div id="dropdown-userpoints" class="text-gray-600 text-xs mt-1"></div>
                                </div>
                            </div>
                            <a href="orders.html" class="block px-4 py-2 text-sm hover:bg-gray-100 rounded">我的订单</a>
                            <a href="points.html" class="block px-4 py-2 text-sm hover:bg-gray-100 rounded">积分明细</a>
                            <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 rounded text-danger hidden">退出登录</button>
                        </div>
                    </div>
                    
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-btn" class="p-2 md:hidden text-gray-600">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="md:hidden pb-4 hidden">
                <nav class="flex flex-col space-y-2">
                    <a href="../../index.html" class="nav-link">首页</a>
                    <a href="shop.html" class="nav-link">商城</a>
                    <a href="points.html" class="nav-link">积分中心</a>
                    <a href="orders.html" class="nav-link nav-link-active">我的订单</a>
                </nav>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-2xl font-bold">我的订单</h1>
            <p class="text-gray-600 mt-2">查看和管理您的所有积分兑换订单</p>
        </div>
        
        <!-- 订单状态筛选 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
            <div class="flex flex-wrap items-center gap-2">
                <span class="text-sm text-gray-600">订单状态：</span>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-primary text-white text-sm" data-status="all">全部</button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 text-sm transition-colors" data-status="pending">待处理</button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 text-sm transition-colors" data-status="processing">处理中</button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 text-sm transition-colors" data-status="completed">已完成</button>
                <button class="filter-btn px-4 py-1.5 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 text-sm transition-colors" data-status="cancelled">已取消</button>
            </div>
        </div>
        
        <!-- 订单列表 -->
        <div id="orders-container" class="space-y-6">
            <!-- 未登录状态 -->
            <div id="not-logged-in" class="bg-white rounded-xl shadow-sm p-8 text-center">
                <i class="fa fa-user-circle-o text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium mb-2">请先登录</h3>
                <p class="text-gray-600 mb-6">登录后查看您的订单信息</p>
                <a href="../user/login.html" class="inline-block px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">去登录</a>
            </div>
            
            <!-- 空订单状态 -->
            <div id="no-orders" class="bg-white rounded-xl shadow-sm p-8 text-center hidden">
                <i class="fa fa-file-text-o text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium mb-2">暂无订单</h3>
                <p class="text-gray-600 mb-6">您还没有任何订单记录</p>
                <a href="shop.html" class="inline-block px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">去兑换</a>
            </div>
            
            <!-- 订单列表容器 -->
            <div id="orders-list" class="space-y-6 hidden">
                <!-- 订单将通过 JavaScript 动态生成 -->
            </div>
        </div>
    </main>

    <!-- 购物车弹窗 -->
    <div id="cart-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-end justify-center">
        <div class="bg-white w-full max-w-3xl rounded-t-2xl shadow-2xl transform transition-transform duration-300 max-h-[80vh] overflow-hidden flex flex-col">
            <div class="p-5 border-b flex justify-between items-center sticky top-0 bg-white z-10">
                <h3 class="font-bold text-lg">我的购物车</h3>
                <button id="close-cart" class="p-2 text-gray-500 hover:text-dark transition-colors">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div id="cart-items" class="flex-1 overflow-y-auto p-5">
                <!-- 购物车为空时显示 -->
                <div id="cart-empty" class="text-center py-10">
                    <i class="fa fa-shopping-cart text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 mb-4">购物车还是空的哦</p>
                    <a href="shop.html" class="inline-block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">去逛逛</a>
                </div>
                
                <!-- 购物车商品列表 -->
                <div id="cart-items-list" class="space-y-4 hidden">
                    <!-- 购物车商品将通过 JavaScript 动态生成 -->
                </div>
            </div>
            
            <div class="p-5 border-t bg-gray-50 sticky bottom-0">
                <div class="flex justify-between items-center mb-4">
                    <div class="text-sm text-gray-600">
                        共 <span id="cart-items-count">0</span> 件商品
                    </div>
                    <div class="text-right">
                        <div class="text-sm text-gray-600">
                            总计积分：
                            <span id="cart-total-points" class="text-primary font-bold text-xl">0</span>
                        </div>
                    </div>
                </div>
                <button id="checkout-btn" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium" disabled>
                    去结算
                </button>
            </div>
        </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div id="order-detail-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white w-full max-w-2xl rounded-2xl shadow-2xl transform transition-transform duration-300 max-h-[90vh] overflow-hidden flex flex-col">
            <div class="p-5 border-b flex justify-between items-center sticky top-0 bg-white z-10">
                <h3 class="font-bold text-lg">订单详情</h3>
                <button id="close-order-detail" class="p-2 text-gray-500 hover:text-dark transition-colors">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div id="order-detail-content" class="flex-1 overflow-y-auto p-5">
                <!-- 订单详情内容将通过 JavaScript 动态生成 -->
            </div>
        </div>
    </div>

    <!-- 通知弹窗 -->
    <div id="notification" class="fixed top-20 right-4 bg-white shadow-lg rounded-lg p-4 max-w-xs transform translate-x-full transition-transform duration-300 z-50 hidden">
        <div class="flex items-start space-x-3">
            <div id="notification-icon" class="w-8 h-8 rounded-full flex items-center justify-center bg-primary/10 text-primary">
                <i class="fa fa-info-circle"></i>
            </div>
            <div class="flex-1">
                <h4 id="notification-title" class="font-medium text-dark"></h4>
                <p id="notification-message" class="text-gray-600 text-sm mt-1"></p>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12 mt-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                        <span class="text-xl font-bold">积分商城</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">积分商城是一个专注于积分兑换和会员福利的平台，为用户提供丰富多彩的商品和服务。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="../../index.html" class="hover:text-primary transition-colors">首页</a></li>
                        <li><a href="shop.html" class="hover:text-primary transition-colors">商城</a></li>
                        <li><a href="points.html" class="hover:text-primary transition-colors">积分中心</a></li>
                        <li><a href="about.html" class="hover:text-primary transition-colors">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-primary transition-colors">常见问题</a></li>
                        <li><a href="terms.html" class="hover:text-primary transition-colors">用户协议</a></li>
                        <li><a href="privacy.html" class="hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="contact.html" class="hover:text-primary transition-colors">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>北京市朝阳区建国路88号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>support@points-mall.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 积分商城. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script>
    // 邮箱验证函数
    function validateEmail(email) {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailPattern.test(email);
    }
    
    // 密码验证函数
    function validatePassword(password) {
        // 基本密码验证：非空且长度至少为6位
        return password && password.length >= 6;
    }
    
    // 获取用户信息函数
    function getUserInfo() {
        const userStr = localStorage.getItem('currentUser');
        return userStr ? JSON.parse(userStr) : null;
    }
    
    // 设置用户信息函数
    function setUserInfo(userData) {
        localStorage.setItem('currentUser', JSON.stringify(userData));
        localStorage.setItem('user', JSON.stringify(userData));
        localStorage.setItem('userInfo', JSON.stringify(userData));
    }
</script>
    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 购物车弹窗
        const cartBtn = document.getElementById('cart-btn');
        const cartModal = document.getElementById('cart-modal');
        const closeCart = document.getElementById('close-cart');
        const cartItems = document.getElementById('cart-items');
        const cartEmpty = document.getElementById('cart-empty');
        const cartItemsList = document.getElementById('cart-items-list');
        const cartItemsCount = document.getElementById('cart-items-count');
        const cartTotalPoints = document.getElementById('cart-total-points');
        const checkoutBtn = document.getElementById('checkout-btn');
        const cartCount = document.getElementById('cart-count');
        
        if (cartBtn && cartModal) {
            cartBtn.addEventListener('click', () => {
                // 更新购物车内容
                updateCartDisplay();
                // 显示购物车弹窗
                cartModal.classList.remove('hidden');
            });
        }
        
        if (closeCart && cartModal) {
            closeCart.addEventListener('click', () => {
                cartModal.classList.add('hidden');
            });
        }
        
        if (cartModal) {
            cartModal.addEventListener('click', (e) => {
                if (e.target === cartModal) {
                    cartModal.classList.add('hidden');
                }
            });
        }

        // 用户菜单
        const userMenuBtn = document.getElementById('user-menu-btn');
        const userDropdown = document.getElementById('user-dropdown');
        const loginRegister = document.getElementById('login-register');
        const userInfo = document.getElementById('user-info');
        const userName = document.getElementById('user-name');
        const avatarPlaceholder = document.getElementById('avatar-placeholder');
        const userAvatar = document.getElementById('user-avatar');
        const dropdownUsername = document.getElementById('dropdown-username');
        const dropdownUserpoints = document.getElementById('dropdown-userpoints');
        const logoutBtn = document.getElementById('logout-btn');
        
        if (userMenuBtn && userDropdown) {
            userMenuBtn.addEventListener('click', () => {
                userDropdown.classList.toggle('hidden');
            });
        }
        
        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (userDropdown && !userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                userDropdown.classList.add('hidden');
            }
        });
        
        // 检查用户登录状态
        function updateUserDisplay() {
            const userInfoData = getUserInfo();
            if (userInfoData) {
                // 用户已登录
                if (loginRegister) loginRegister.classList.add('hidden');
                if (userInfo) userInfo.classList.remove('hidden');
                if (userName) userName.textContent = userInfoData.username;
                if (userAvatar) userAvatar.src = userInfoData.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${userInfoData.username}`;
                if (dropdownUsername) dropdownUsername.textContent = userInfoData.username;
                if (dropdownUserpoints) dropdownUserpoints.textContent = `积分: ${userInfoData.points || 0}`;
                if (avatarPlaceholder) avatarPlaceholder.innerHTML = `<img src="${userInfoData.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${userInfoData.username}`}" alt="用户头像" class="w-full h-full rounded-full object-cover">`;
                if (logoutBtn) logoutBtn.classList.remove('hidden');
            } else {
                // 用户未登录
                if (loginRegister) loginRegister.classList.remove('hidden');
                if (userInfo) userInfo.classList.add('hidden');
                if (userName) userName.textContent = '登录/注册';
                if (avatarPlaceholder) avatarPlaceholder.innerHTML = '<i class="fa fa-user text-gray-500"></i>';
                if (logoutBtn) logoutBtn.classList.add('hidden');
            }
        }
        
        // 退出登录
        if (logoutBtn) {
            logoutBtn.addEventListener('click', () => {
                logout();
                updateUserDisplay();
                updateOrdersDisplay(); // 更新订单显示
                showNotification('退出成功', '您已成功退出登录', 'info');
                userDropdown.classList.add('hidden');
            });
        }

        // 订单状态筛选
        const filterBtns = document.querySelectorAll('.filter-btn');
        let currentFilter = 'all';
        
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 更新按钮样式
                filterBtns.forEach(b => {
                    b.classList.remove('bg-primary', 'text-white');
                    b.classList.add('bg-gray-100', 'text-gray-600');
                });
                this.classList.remove('bg-gray-100', 'text-gray-600');
                this.classList.add('bg-primary', 'text-white');
                
                // 更新筛选器
                currentFilter = this.getAttribute('data-status');
                
                // 更新订单显示
                updateOrdersDisplay();
            });
        });

        // 订单详情弹窗
        const orderDetailModal = document.getElementById('order-detail-modal');
        const closeOrderDetail = document.getElementById('close-order-detail');
        const orderDetailContent = document.getElementById('order-detail-content');
        
        if (closeOrderDetail && orderDetailModal) {
            closeOrderDetail.addEventListener('click', () => {
                orderDetailModal.classList.add('hidden');
            });
        }
        
        if (orderDetailModal) {
            orderDetailModal.addEventListener('click', (e) => {
                if (e.target === orderDetailModal) {
                    orderDetailModal.classList.add('hidden');
                }
            });
        }

        // 获取订单列表
        function getOrders() {
            const orders = JSON.parse(localStorage.getItem('orders') || '[]');
            return orders;
        }

        // 获取订单状态文本和样式
        function getOrderStatusInfo(status) {
            switch(status) {
                case 'pending':
                    return { text: '待处理', class: 'bg-warning/10 text-warning' };
                case 'processing':
                    return { text: '处理中', class: 'bg-primary/10 text-primary' };
                case 'completed':
                    return { text: '已完成', class: 'bg-success/10 text-success' };
                case 'cancelled':
                    return { text: '已取消', class: 'bg-gray-100 text-gray-500' };
                default:
                    return { text: '未知状态', class: 'bg-gray-100 text-gray-500' };
            }
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        // 更新订单显示
        function updateOrdersDisplay() {
            const userInfoData = getUserInfo();
            const notLoggedInElement = document.getElementById('not-logged-in');
            const noOrdersElement = document.getElementById('no-orders');
            const ordersListElement = document.getElementById('orders-list');
            
            if (!userInfoData) {
                // 用户未登录
                if (notLoggedInElement) notLoggedInElement.classList.remove('hidden');
                if (noOrdersElement) noOrdersElement.classList.add('hidden');
                if (ordersListElement) ordersListElement.classList.add('hidden');
                return;
            }
            
            // 用户已登录，获取订单
            const allOrders = getOrders();
            
            // 过滤当前用户的订单
            let userOrders = allOrders.filter(order => order.userId === userInfoData.id);
            
            // 按状态过滤
            if (currentFilter !== 'all') {
                userOrders = userOrders.filter(order => order.status === currentFilter);
            }
            
            // 按创建时间倒序排序
            userOrders.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
            
            // 更新显示
            if (notLoggedInElement) notLoggedInElement.classList.add('hidden');
            
            if (userOrders.length === 0) {
                if (noOrdersElement) noOrdersElement.classList.remove('hidden');
                if (ordersListElement) ordersListElement.classList.add('hidden');
            } else {
                if (noOrdersElement) noOrdersElement.classList.add('hidden');
                if (ordersListElement) {
                    ordersListElement.classList.remove('hidden');
                    
                    // 清空列表
                    ordersListElement.innerHTML = '';
                    
                    // 添加订单
                    userOrders.forEach(order => {
                        const statusInfo = getOrderStatusInfo(order.status);
                        const totalItems = order.items.reduce((sum, item) => sum + item.quantity, 0);
                        
                        const orderCard = document.createElement('div');
                        orderCard.className = 'bg-white rounded-xl order-card-shadow overflow-hidden';
                        orderCard.innerHTML = `
                            <div class="p-5 border-b flex justify-between items-center">
                                <div class="flex items-center space-x-3">
                                    <div class="text-sm font-medium">订单号：${order.id}</div>
                                    <div class="text-sm text-gray-500">${formatDate(order.createdAt)}</div>
                                </div>
                                <div class="px-3 py-1 rounded-full text-sm ${statusInfo.class}">${statusInfo.text}</div>
                            </div>
                            <div class="p-5">
                                <div class="space-y-3">
                                    ${order.items.slice(0, 3).map(item => `
                                        <div class="flex items-center space-x-4">
                                            <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded-lg">
                                            <div class="flex-1 min-w-0">
                                                <h4 class="font-medium text-sm line-clamp-1">${item.name}</h4>
                                                <div class="flex justify-between items-center mt-1">
                                                    <div class="text-xs text-gray-500">积分: <span class="text-primary">${item.points}</span></div>
                                                    <div class="text-xs text-gray-500">x${item.quantity}</div>
                                                </div>
                                            </div>
                                        </div>
                                    `).join('')}
                                    ${order.items.length > 3 ? `<div class="text-sm text-gray-500 text-center">等${order.items.length}件商品</div>` : ''}
                                </div>
                                
                                <div class="mt-5 pt-4 border-t flex justify-between items-center">
                                    <div class="text-sm text-gray-600">共 ${totalItems} 件商品</div>
                                    <div class="text-right">
                                        <div class="text-sm text-gray-600">
                                            总计积分：
                                            <span class="text-primary font-bold">${order.totalPoints}</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-5 flex justify-end space-x-3">
                                    <button class="view-order-detail px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors text-sm" data-id="${order.id}">
                                        查看详情
                                    </button>
                                    ${order.status === 'pending' ? `
                                        <button class="cancel-order px-4 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors text-sm" data-id="${order.id}">
                                            取消订单
                                        </button>
                                    ` : ''}
                                </div>
                            </div>
                        `;
                        
                        ordersListElement.appendChild(orderCard);
                    });
                    
                    // 绑定查看详情按钮事件
                    document.querySelectorAll('.view-order-detail').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const orderId = this.getAttribute('data-id');
                            showOrderDetail(orderId);
                        });
                    });
                    
                    // 绑定取消订单按钮事件
                    document.querySelectorAll('.cancel-order').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const orderId = this.getAttribute('data-id');
                            if (confirm('确定要取消这个订单吗？')) {
                                cancelOrder(orderId);
                                showNotification('订单已取消', '您的订单已成功取消', 'info');
                                updateOrdersDisplay();
                            }
                        });
                    });
                }
            }
        }

        // 显示订单详情
        function showOrderDetail(orderId) {
            const userInfoData = getUserInfo();
            if (!userInfoData) return;
            
            const allOrders = getOrders();
            const order = allOrders.find(o => o.id === orderId && o.userId === userInfoData.id);
            
            if (order && orderDetailContent) {
                const statusInfo = getOrderStatusInfo(order.status);
                
                // 清空内容
                orderDetailContent.innerHTML = '';
                
                // 创建详情内容
                const detailContent = document.createElement('div');
                detailContent.innerHTML = `
                    <div class="mb-6">
                        <h4 class="font-medium text-lg mb-4">订单信息</h4>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">订单号：</span>
                                <span class="font-medium">${order.id}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">创建时间：</span>
                                <span>${formatDate(order.createdAt)}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">订单状态：</span>
                                <span class="px-3 py-1 rounded-full text-sm ${statusInfo.class}">${statusInfo.text}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">用户：</span>
                                <span>${userInfoData.username}</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <h4 class="font-medium text-lg mb-4">商品信息</h4>
                        <div class="space-y-4">
                            ${order.items.map(item => `
                                <div class="flex items-center space-x-4 p-3 border-b">
                                    <img src="${item.image}" alt="${item.name}" class="w-20 h-20 object-cover rounded-lg">
                                    <div class="flex-1 min-w-0">
                                        <h5 class="font-medium line-clamp-1">${item.name}</h5>
                                        <div class="flex justify-between items-center mt-2">
                                            <div class="text-primary font-medium">${item.points} 积分</div>
                                            <div class="text-gray-600">x${item.quantity}</div>
                                        </div>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex justify-between mb-2">
                            <span class="text-gray-600">商品数量：</span>
                            <span>${order.items.reduce((sum, item) => sum + item.quantity, 0)}</span>
                        </div>
                        <div class="flex justify-between mb-2">
                            <span class="text-gray-600">订单总额：</span>
                            <span class="text-primary font-bold text-xl">${order.totalPoints} 积分</span>
                        </div>
                    </div>
                    
                    <div class="mt-6 flex justify-end space-x-3">
                        ${order.status === 'pending' ? `
                            <button class="cancel-order-detail px-5 py-2.5 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors" data-id="${order.id}">
                                取消订单
                            </button>
                        ` : ''}
                        <button class="close-order-detail-btn px-5 py-2.5 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                            关闭
                        </button>
                    </div>
                `;
                
                orderDetailContent.appendChild(detailContent);
                
                // 绑定关闭按钮事件
                detailContent.querySelector('.close-order-detail-btn').addEventListener('click', () => {
                    orderDetailModal.classList.add('hidden');
                });
                
                // 绑定取消订单按钮事件
                const cancelBtn = detailContent.querySelector('.cancel-order-detail');
                if (cancelBtn) {
                    cancelBtn.addEventListener('click', function() {
                        const orderId = this.getAttribute('data-id');
                        if (confirm('确定要取消这个订单吗？')) {
                            cancelOrder(orderId);
                            showNotification('订单已取消', '您的订单已成功取消', 'info');
                            orderDetailModal.classList.add('hidden');
                            updateOrdersDisplay();
                        }
                    });
                }
                
                // 显示弹窗
                orderDetailModal.classList.remove('hidden');
            }
        }

        // 取消订单
        function cancelOrder(orderId) {
            const userInfoData = getUserInfo();
            if (!userInfoData) return;
            
            const allOrders = getOrders();
            const orderIndex = allOrders.findIndex(o => o.id === orderId && o.userId === userInfoData.id && o.status === 'pending');
            
            if (orderIndex !== -1) {
                // 取消订单，退还积分
                const order = allOrders[orderIndex];
                
                // 退还积分
                userInfoData.points = (userInfoData.points || 0) + order.totalPoints;
                setUserInfo(userInfoData);
                
                // 更新订单状态
                order.status = 'cancelled';
                allOrders[orderIndex] = order;
                localStorage.setItem('orders', JSON.stringify(allOrders));
                
                // 更新用户显示
                updateUserDisplay();
            }
        }

        // 更新购物车显示
        function updateCartDisplay() {
            const cartData = getCart();
            const userInfoData = getUserInfo();
            
            // 更新购物车数量标记
            if (cartCount) {
                cartCount.textContent = cartData.length;
                if (cartData.length === 0) {
                    cartCount.classList.add('hidden');
                } else {
                    cartCount.classList.remove('hidden');
                }
            }
            
            // 更新购物车内容
            if (cartItemsList && cartEmpty && cartItemsCount && cartTotalPoints && checkoutBtn) {
                if (cartData.length === 0) {
                    cartItemsList.classList.add('hidden');
                    cartEmpty.classList.remove('hidden');
                    cartItemsCount.textContent = 0;
                    cartTotalPoints.textContent = 0;
                    checkoutBtn.disabled = true;
                } else {
                    cartItemsList.classList.remove('hidden');
                    cartEmpty.classList.add('hidden');
                    
                    // 清空购物车列表
                    cartItemsList.innerHTML = '';
                    
                    let totalPoints = 0;
                    
                    // 添加购物车商品
                    cartData.forEach(item => {
                        // 这里我们假设有一个获取商品详情的方法，由于我们没有实际的商品数据API，这里简化处理
                        const product = { id: item.id, name: item.name || '商品', points: item.points || 0, image: item.image || 'https://picsum.photos/seed/default/300/300' };
                        totalPoints += product.points * item.quantity;
                        
                        const cartItem = document.createElement('div');
                        cartItem.className = 'flex items-start border-b pb-4';
                        cartItem.innerHTML = `
                            <img src="${product.image}" alt="${product.name}" class="w-20 h-20 object-cover rounded-lg">
                            <div class="ml-3 flex-1">
                                <h4 class="font-medium text-dark line-clamp-1">${product.name}</h4>
                                <p class="text-gray-500 text-xs mt-1">积分: <span class="text-primary font-medium">${product.points}</span></p>
                                <div class="flex items-center justify-between mt-2">
                                    <div class="flex items-center border rounded">
                                        <button class="decrease-quantity px-2 py-1 text-gray-500 hover:text-dark" data-id="${item.id}">-</button>
                                        <span class="px-2 py-1 min-w-8 text-center">${item.quantity}</span>
                                        <button class="increase-quantity px-2 py-1 text-gray-500 hover:text-dark" data-id="${item.id}">+</button>
                                    </div>
                                    <button class="remove-from-cart text-danger hover:text-danger/80" data-id="${item.id}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                        
                        cartItemsList.appendChild(cartItem);
                    });
                    
                    // 更新数量和总价
                    cartItemsCount.textContent = cartData.reduce((sum, item) => sum + item.quantity, 0);
                    cartTotalPoints.textContent = totalPoints;
                    
                    // 检查是否可以结算
                    checkoutBtn.disabled = !userInfoData;
                    
                    // 如果用户未登录，更新结算按钮文本
                    if (!userInfoData) {
                        checkoutBtn.textContent = '请先登录';
                    } else {
                        checkoutBtn.textContent = '去结算';
                    }
                    
                    // 为购物车内的按钮绑定事件
                    document.querySelectorAll('.decrease-quantity').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            decreaseQuantity(productId);
                            updateCartDisplay();
                        });
                    });
                    
                    document.querySelectorAll('.increase-quantity').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            increaseQuantity(productId);
                            updateCartDisplay();
                        });
                    });
                    
                    document.querySelectorAll('.remove-from-cart').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            removeFromCart(productId);
                            updateCartDisplay();
                            showNotification('移除成功', '已从购物车移除商品', 'info');
                        });
                    });
                }
            }
        }

        // 去结算
        if (checkoutBtn) {
            checkoutBtn.addEventListener('click', () => {
                const userInfoData = getUserInfo();
                if (userInfoData) {
                    // 由于我们没有完整的商品数据，这里简化处理
                    // 跳转到订单页面
                    window.location.href = 'orders.html';
                } else {
                    // 跳转到登录页面
                    window.location.href = 'login.html';
                }
            });
        }

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 更新用户显示
            updateUserDisplay();
            
            // 更新购物车显示
            updateCartDisplay();
            
            // 更新订单显示
            updateOrdersDisplay();
        });
    </script>
</body>
</html>